<template>
    <div class="notice-warp">
        <div class="text">
            <h5 class="title">{{data.title}}</h5>
            <div class="bottom">
                <div class="left">
                    <div class="avatar">
                        <notice-image width="1rem" height="1rem" radius="1rem" fit="cover" :src="data.avatar"></notice-image>
                    </div>
                    <div class="info">
                        <span class="name">{{data.nickname}}</span>
                        <span class="time">{{data.time}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="txt ql-snow ql-editor" v-html="data.content"></div>
        </div>
    </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import NoticeImage from '../Common/Image/Index'
export default {
    name: 'NoticeContent',
    components: {
        NoticeImage
    },
    props: {
        data: {
            type: Object
        }
    },
}
</script>

<style scoped>
.ql-editor{
    padding:0;
}
.notice-warp{
    padding:0.1rem 0.2rem;
}
.notice-warp .text .title{
    font-size:0.36rem;
    line-height:1.5;
    color:#333;
}
.notice-warp .text .bottom{
    margin-top:0.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.notice-warp .text .bottom .left{
    font-size:0.30rem;
    color:#999;
    font-weight:600;
    display:flex;
    align-items: center;
}
.notice-warp .text .bottom .left .avatar{
    margin-right:0.2rem;
}
.notice-warp .text .bottom .left .avatar .img{
    display: block;
    width:1rem;
    height:1rem;
    border-radius:100%;
}
.notice-warp .text .bottom .left .info .name{
    display: block;
    margin-bottom:0.16rem;
}
.notice-warp .content{
    margin-top:0.2rem;
    font-size:0.32rem;
    font-weight:600;
    color:#333;
    line-height:1.6;
}
.notice-warp .content .txt{
    width:100%;
}
.notice-warp .content .txt /deep/ img{
    width:100%;
}
.notice-warp .content .txt /deep/ .ql-video{
    margin:0 auto;
}
</style>